<template>
    <div class="fixed top-0 left-0 w-screen h-screen flex justify-center items-center flex-col">
        <CoreBackGroundColorComponent />
        <CoreBarNavightionComponent />
        <div class="fixed w-full">
            <div
                class="bg-white mx-5 flex fixed left-0 right-0 justify-center top-32 bottom-40 rounded-3xl border border-black shadow-2xl">
                <div class="flex absolute top-0 justify-center text-black w-full text-center ml-5 mr-5 text-1xl font-bold bg-slate-300 items-center border border-black shadow-xl rounded-br-xl rounded-bl-xl rounded-tr-2xl rounded-tl-2xl flex-col"
                    style="height:16%">
                    <h2 v-text="resultStore.headerTitle" />
                </div>
                <div class="my-0 flex absolute top-28 w-full justify-center items-center flex-col">
                    <div class="w-full h-auto">
                        <h4 class="indent-8 mx-4" v-text="resultStore.messageTitle" />
                        <van-divider :style="{ color: '#7f7e84', borderColor: '#7f7e84', padding: '0 10px', }">
                            <p class="text-sm text-center text-slate-400" v-text="resultStore.dividerTitle" />
                        </van-divider>
                        <el-table :data="resultStore.ResTable1Value.slice(0, 3)" border>
                            <el-table-column prop="title" label="类型" align="center" />
                            <el-table-column prop="value" label="个数" align="center" />
                        </el-table>
                        <van-space direction="vertical" fill size='8px' class="mx-6 my-8">
                            <van-button type="primary" @click="resultStore.getOutcomeEngramExhibition" block round text="查看报告"/>
                            <van-button type="danger" @click="resultStore.getRetestEngramExhibition" block round text="重新测评"/>
                        </van-space>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
const resultStore = useResultStore()

onBeforeMount(async () => {
    await resultStore.initStore()
})
</script>

<style scoped></style>